<template>
  <div id="app" >
      <div :class="currentIdx == index ?'nav-item active' : 'nav-item' " v-for="(item, index) in articleList" :key="item.name" @click="bindClick(index)">{{item.name}}</div>
  </div>
</template>

<script>

import articleList from './article-data.js';

export default {
  name: 'App',
  data() {  
    return {
      currentIdx: 0,
      articleList: articleList
    }
  },
  mounted () {
    this.__navbarUpdate(); 
  },
  methods: {
    bindClick(index) {
      this.currentIdx = index;
      this.__navbarUpdate(); 
    },

    __navbarUpdate() {
      if (window.__POWERED_BY_QIANKUN__) {
        setTimeout(()=> {
          this.$rss.done('toogleArticle', this.articleList[this.currentIdx]); 
        }, 0);
      }
    }

  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
.nav-item{
  padding: 20px 0;
  
}
.nav-item.active{
  background-color: blue;
  color: #fff
}
</style>
